import { useIntl } from '@umijs/max';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import React from 'react';
import { fitChartSize } from '../utils/tools';

// 定义数据类型
export interface StationHistoryIncomeData {
  stationId: number;
  income: number;
  stationName: string;
}

// 定义组件属性类型
interface RevenueRankingProps {
  data: StationHistoryIncomeData[];
}

// 创建组件
const RevenueRanking: React.FC<RevenueRankingProps> = ({ data }) => {
  const intl = useIntl();
  // 提取数据
  const stationNames = data.map((item) => item.stationName);
  const incomes = data
    .map((item) => item.income)
    .filter((item) => typeof item === 'number' && item !== null);

  // 配置 ECharts 选项
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      backgroundColor: 'rgba(3, 25, 54, 0.7)', // 设置背景颜色和透明度
      borderColor: '#4c8fce', // 设置边框颜色
      borderWidth: 1, // 设置边框宽度
      textStyle: {
        color: '#C4D4F1', // 设置文字颜色
        fontSize: fitChartSize(12),
      },
      formatter: function (params: any) {
        if (params.length > 0) {
          const item = params[1]; // 取第二个 series 的数据，因为第一个是背景
          return `${item.name} : ${item.value.toFixed(2)} ${intl.formatMessage({
            id: 'bigdata.wy',
          })}`;
        }
        return '';
      },
    },
    grid: {
      left: '2%', // 确保左侧有足够的空间显示 Y 轴标签
      right: '0%', // 预留足够的空间显示标签
      bottom: '2%',
      top: '10%',
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: 'value',
      min: 0, // 设置最小值为 0
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#77a5f1',
          },
          width: 58, // 限制宽度为 58px
          overflow: 'truncate', // 截断文本并显示省略号
          rich: {
            alignLeft: {
              width: 58,
              align: 'left',
              padding: [0, 0, 0, -5], // 通过负的 padding 左移文字
            },
          },
          formatter: function (value: string) {
            if (value.length > 5) {
              return `{alignLeft|${value.slice(0, 4)}...}`;
            }
            return `{alignLeft|${value}}`;
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: stationNames,
      },
    ],
    series: [
      {
        name: '背景',
        type: 'bar',
        barWidth: fitChartSize(10),
        barGap: '-100%',
        data: Array(stationNames.length).fill(97), // 使用最大值和 1 的较大值作为背景
        itemStyle: {
          color: '#0F2035', // 设置背景颜色
          barBorderRadius: [0, 5, 5, 0], // 圆角
        },
        label: {
          show: true,
          position: 'insideTopRight', // 在条形图上方显示收益数据
          distance: 5, // 距离柱状图顶部的距离
          align: 'right', // 右对齐
          formatter: (params: { dataIndex: number }) => {
            return `${incomes[params.dataIndex].toFixed(2)}`; // 格式化显示内容
          },
          color: '#C4D4F1', // 设置文本颜色
          fontSize: fitChartSize(11.5),
          offset: [0, fitChartSize(-20)], // 调整标签位置，使其靠右对齐
        },
      },
      {
        name: intl.formatMessage({ id: 'bigdata.revenue' }),
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          barBorderRadius: [0, 5, 5, 0], // 圆角
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#ff790d' },
            { offset: 1, color: '#fffceb' },
          ]),
        },
        barWidth: fitChartSize(10),
        barGap: '-100%',
        data: incomes,
      },
    ],
  };

  return <ReactECharts option={option} style={{ width: '100%', height: fitChartSize(185) }} />;
};

export default RevenueRanking;
